<template>
  <div class="con">
    <!-- 这是用户列表页面 -->
  <div class="messagelist" v-if="userlist.length > 0">
    <div
      :class="['item', !item.from_id.isOnline? 'active' : '']"
      v-for="(item, index) in userlist"
      :key="index"
      @click="gomessage(item.from_id)"
    >
      <img :src="item.from_id.headerimg" alt="" />
      <div class="center">
        <h3>
          {{ item.username }}
        </h3>
      </div>
      <div class="right">
        <p>12:25</p>
        <p>
          <i v-if="item.noreadnumber != 0">
            {{ item.noreadnumber }}
          </i>
        </p>
      </div>
    </div>
  </div>

  <div v-else>
      没有新消息
  </div>

  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    userlist: {
      type: Array,
      default: [],
    },
    newmsg: {
      type: Object,
      default: null,
    },
  },
  watch: {
  
    newmsg: {
      handler(val,val1) {
        // console.log(val, val1);
        if (val != val1) {
          // 将消息添加到对应的
          let arr = JSON.parse(
            localStorage.getItem(`msglist-${val.to_id}-${val.from_id}`)
          );
          arr.push(val);

          // 将所有消息存到本地
          localStorage.setItem(
            `msglist-${val.to_id}-${val.from_id}`,
            JSON.stringify(arr)
          ); //   return newName
        }
      },
      deep: true,
      // immediate: true,
    },
  },

  mounted() {
  

  },
  methods: {
    gomessage(data) {
      this.$router.push({
        path: "/infoList",
        query: data,
      });
    },
  },
};
</script>

<style scoped lang="less">
.messagelist {
  padding: 0 10px;
  div.item {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 5px;
    }
    .center {
      flex: 1;
      padding-left: 10px;
      display: flex;
      flex-direction: column;
      h3 {
        font-weight: 550;
      }
      span {
        color: #333;
      }
    }

    div.right {
      color: #555;
      p {
        i {
          display: block;
          line-height: 20px;
          text-align: center;
          height: 20px;
          border-radius: 10px;
          background-color: #ccc;
          color: #fff;
        }
      }
    }
  }
}

.active {
  filter: grayscale(100%);
}
</style>